<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Посмотри в окно</title>
    <link rel="stylesheet" href="./fonts/fonts.css" />
    <link rel="stylesheet" href="./styles/style.css" />
    <link rel="stylesheet" href="./styles/preloader.css" />
    <link rel="stylesheet" href="./styles/error.css" />
  </head>
  <body class="page">
    <main class="content">
      <section class="result">
        <div class="result__video-container">
          <video src="" controls class="result__video" poster=""></video>
        </div>
        <form class="search-form">
          <fieldset class="search-form__fieldset">
            <h2 class="search-form__fieldset-title">Город</h2>
            <label class="search-form__label">
              <span class="search-form__label-text visually-hidden">Город</span>
              <input
                type="text"
                placeholder="Санкт Петербург, например"
                name="city"
                class="search-form__textfield"
              />
            </label>
          </fieldset>
          <fieldset class="search-form__fieldset">
            <h2 class="search-form__fieldset-title">Время суток</h2>
            <div class="search-form__checkbox-list">
              <label class="search-form__label">
                <input
                  type="checkbox"
                  name="time"
                  value="morning"
                  class="search-form__checkbox visually-hidden"
                />
                <span class="search-form__pseudo-checkbox"></span>
                <span class="search-form__label-text">Утро</span>
              </label>
              <label class="search-form__label">
                <input
                  type="checkbox"
                  name="time"
                  value="afternoon"
                  class="search-form__checkbox visually-hidden"
                />
                <span class="search-form__pseudo-checkbox"></span>
                <span class="search-form__label-text">День</span>
              </label>
              <label class="search-form__label">
                <input
                  type="checkbox"
                  name="time"
                  value="night"
                  class="search-form__checkbox visually-hidden"
                />
                <span class="search-form__pseudo-checkbox"></span>
                <span class="search-form__label-text">Ночь</span>
              </label>
            </div>
          </fieldset>
          <button type="submit" class="button search-form__submit-button">
            Найти
          </button>
        </form>
      </section>
      <section class="content__details">
        <h1 class="title">
          <span class="content__accent">По-</span><br />смотри<br />в окно
        </h1>
        <ul class="content__list">
          <!-- ЗДЕСЬ ОКАЖУТСЯ ТЕМПЛЕЙТЫ КАРТОЧЕК -->
        </ul>
      </section>
    </main>

    <!-- ТЕМПЛЕЙТЫ -->

    <template class="preloader-template">
      <div class="preloader">
        <div class="preloader-chasing-squares">
          <div class="square"></div>
          <div class="square"></div>
          <div class="square"></div>
          <div class="square"></div>
        </div>
      </div>
    </template>

    <template class="cards-list-item-template">
      <li class="content__list-item">
        <a href="#0" class="content__card-link">
          <article class="content__video-card">
            <div class="content__video-card-description-container">
              <h2 class="content__video-card-title"></h2>
              <p class="content__video-card-description"></p>
            </div>
            <img src="" alt="" class="content__video-card-thumbnail" />
          </article>
        </a>
      </li>
    </template>
    <template class="more-button-template">
      <li><button class="button more-button">Показать еще</button></li>
    </template>

    <template class="error-template">
      <div class="error">
        <h2 class="error__title"></h2>
      </div>
    </template>
    <script src="./scripts/script.js"></script>
  </body>
</html>
